<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"
	template="/templates/template.xhtml">

	<f:metadata>
		<f:event type="preRenderView" listener="#{manejoBean.verificarAcesso}" />
	</f:metadata>

	<ui:define name="body">
		<h:form id="form" prependId="false">
			<p:fieldset legend="Manejo" id="fieldPrincipal">
				<h:panelGrid columns="4" id="panelCadastro" columnClasses="coluna20,coluna30,coluna20,coluna30" width="100%">

					<h:outputLabel value="Animal:" for="animais" styleClass="icoObrigatorio" />
					<p:autoComplete queryDelay="500" size="50" value="#{manejoBean.animais}"
						completeMethod="#{manejoBean.completeAnimal}" var="animal" forceSelection="true" itemLabel="#{animal.nome}"
						itemValue="#{animal.id}" converter="animalConverter" multiple="true" id="animais"
						requiredMessage="#{manejoBean.requiredMessage}" required="true">
						<p:column style="width:20%;text-align:center">
							<p:graphicImage value="/imagemServlet?file=#{animal.urlImagemAleatoria}" width="40" height="50"
								rendered="#{animal.urlImagemAleatoria != null and !empty animal.urlImagemAleatoria}" />
						</p:column>
						<p:column style="width:60%">
							<h:outputText value="#{animal.nome}" />
						</p:column>
						<p:column style="width:20%">
							<h:outputText value="#{animal.sexoFormat}" />
						</p:column>
					</p:autoComplete>
					<p:message for="animais" />
					<h:outputText value=" " />

					<h:outputLabel value="Executor:" for="executor" styleClass="icoObrigatorio" />
					<p:autoComplete queryDelay="500" size="50" value="#{manejoBean.executor}" minQueryLength="2" id="executor"
						completeMethod="#{manejoBean.completeUsuario}" forceSelection="true" var="user" itemLabel="#{user.nome}"
						itemValue="#{user.id}" converter="usuarioConverter" requiredMessage="#{manejoBean.requiredMessage}"
						required="true" />
					<p:message for="executor" />
					<h:outputText value=" " />
					
					<h:outputLabel value="Avaliador:" for="avaliador" styleClass="icoObrigatorio" />
					<p:autoComplete queryDelay="500" size="50" value="#{manejoBean.avaliador}" minQueryLength="2" id="avaliador"
						completeMethod="#{manejoBean.completeUsuario}" forceSelection="true" var="user" itemLabel="#{user.nome}"
						itemValue="#{user.id}" converter="usuarioConverter" requiredMessage="#{manejoBean.requiredMessage}"
						required="true" />
					<p:message for="avaliador" />
					<h:outputText value=" " />


					<h:outputLabel value="Tipo de Tarefa:" styleClass="icoObrigatorio" />
					<p:selectOneMenu id="tipoTarefa" effect="fade" style="width:300px;" value="#{manejoBean.idTipoTarefa}"
						requiredMessage="#{manejoBean.requiredMessage}" required="true">
						<f:selectItem itemLabel="Selecione" itemValue="" />
						<f:selectItems value="#{manejoBean.listaTipoTarefa}" />
					</p:selectOneMenu>
					<p:message for="tipoTarefa" />
					<h:outputText value=" " />


					<h:outputText value="Data de Início:" styleClass="icoObrigatorio" />
					<h:panelGrid columns="2" cellpadding="0" cellspacing="0">
						<p:calendar locale="pt" pattern="dd/MM/yyyy HH:mm" id="dtInicio" navigator="true" maxlength="15" size="20"
							readOnlyInputText="true" value="${manejoBean.model.dtInicio}" mode="popup" showOn="button"
							requiredMessage="#{manejoBean.requiredMessage}" required="true" />
						<p:commandLink process="@this" title="Limpar" update="dtInicio">
							<h:graphicImage name="icone-limpar.png" library="design/imagem" />
							<f:setPropertyActionListener target="${manejoBean.model.dtInicio}" value="" />
						</p:commandLink>
					</h:panelGrid>
					<p:message for="dtInicio" />
					<h:outputText value=" " />

					<h:outputText value="Data de Término:" styleClass="icoObrigatorio" />
					<h:panelGrid columns="2" cellpadding="0" cellspacing="0">
						<p:calendar locale="pt" pattern="dd/MM/yyyy HH:mm" id="dtTermino" navigator="true" maxlength="15" size="20"
							readOnlyInputText="true" value="${manejoBean.model.dtFim}" mode="popup" showOn="button"
							requiredMessage="#{manejoBean.requiredMessage}" required="true" />
						<p:commandLink process="@this" title="Limpar" update="dtTermino">
							<h:graphicImage name="icone-limpar.png" library="design/imagem" />
							<f:setPropertyActionListener target="${manejoBean.model.dtFim}" value="" />
						</p:commandLink>
					</h:panelGrid>
					<p:message for="dtTermino" />
					<h:outputText value=" " />


					<h:outputLabel value="Observação:" />
					<p:inputTextarea autoResize="false" value="#{manejoBean.model.observacao}" id="obs" cols="50" rows="5" />
					<p:message for="obs" />
					<h:outputText value=" " />
				</h:panelGrid>

				<p:panel header="Produto(s)" style="width:100%" id="panelPro">

					<h:panelGrid columns="4" id="panelProduto" columnClasses="coluna20,coluna30,coluna20,coluna30" width="100%">

						<h:outputLabel value="Produto:" for="produto" styleClass="icoObrigatorio" />
						<p:autoComplete queryDelay="500" size="40" value="#{manejoBean.produto}"
							completeMethod="#{manejoBean.completeProduto}" var="produto" forceSelection="true"
							itemLabel="#{produto.descricao}" itemValue="#{produto.id}" converter="produtoConverter" multiple="false"
							id="produto" />

						<h:outputLabel value="Unidade de medida:" styleClass="icoObrigatorio" />
						<p:selectOneMenu id="idUnidadeMedida" effect="fade" style="width:300px;" value="#{manejoBean.idTipoMedida}">
							<f:selectItem itemLabel="Selecione" itemValue="" />
							<f:selectItems value="#{manejoBean.listaTipoMedida}" />
						</p:selectOneMenu>

						<h:outputLabel value="Quantidade:" styleClass="icoObrigatorio" />
						<p:inputText value="#{manejoBean.manejoProduto.qtdUsoToString}" id="idQtdP" size="20" maxlength="7" />
					</h:panelGrid>

					<div align="center">
						<p:commandButton value="Adicionar" ajax="true" process="panelPro" update="panelPro"
							action="#{manejoBean.adicionarProduto}" />
					</div>

					<br />
					<p:dataTable var="produtos" id="listaProdutos" emptyMessage="#{manejoBean.emptyMessage}" update="listaProdutos"
						rowsPerPageTemplate="#{manejoBean.paginacao}" styleClass="coluna100" value="#{manejoBean.model.manejoProdutos}"
						paginator="true" rows="5" rowStyleClass="#{empty rowIx or rowIx mod 2 ne 0 ? 'linhaImpar' : 'linhaPar'}"
						rowIndexVar="rowIx">

						<p:column headerText="Produto" filterMatchMode="contains" filterBy="#{produtos.produto.descricao}"
							style="width:40%">
							<h:outputLabel value="#{produtos.produto.descricao}" />
						</p:column>
						<p:column headerText="Unidade de medida" filterMatchMode="contains" filterBy="#{produtos.unidadeMedida.descricao}"
							style="width:40%">
							<h:outputLabel value="#{produtos.unidadeMedida.descricao}" />
						</p:column>
						<p:column headerText="Quantidade" filterBy="#{produtos.qtdUso}" style="width:10%">
							<h:outputLabel value="#{produtos.qtdUso}" />
						</p:column>

						<p:column headerText="Ações" style="width:10%;text-align:center;">

							<p:commandLink title="Editar" style="padding:5px !important;" update=":form:panelProduto" process="@this"
								action="#{manejoBean.loadProdutos}">
								<h:graphicImage library="design/imagem" name="icone-editar.png" />
								<f:setPropertyActionListener target="#{manejoBean.manejoProduto}" value="#{produtos}" />
							</p:commandLink>

							<p:commandLink title="Excluir" process="@this" oncomplete="confirmationProduto.show()">
								<h:graphicImage library="design/imagem" name="icone-excluir.png" />
								<f:setPropertyActionListener target="#{manejoBean.manejoProdutoExcluir}" value="#{produtos}" />
							</p:commandLink>
						</p:column>
					</p:dataTable>
				</p:panel>

				<br />
				<p:toolbar>
					<p:toolbarGroup align="left">
						<p:commandButton value="Limpar" immediate="true" ajax="false" action="manejo.jsf" />
						<p:commandButton rendered="#{p:ifGranted('ROLE_MANEJO_SALVAR')}" value="Salvar" ajax="true" process="@form" update="@form" action="#{manejoBean.save}" />
					</p:toolbarGroup>
				</p:toolbar>
				<br />
			</p:fieldset>

			<p:confirmDialog appendToBody="true" message="Confirma a Exclusão" header="Exclusão" severity="alert"
				widgetVar="confirmationProduto">
				<h:panelGrid columns="2">
					<p:commandButton value="Sim" update="listaProdutos" oncomplete="confirmationProduto.hide()"
						actionListener="#{manejoBean.excluirProduto}" immediate="true" />
					<p:commandButton value="Não" onclick="confirmationProduto.hide()" />
				</h:panelGrid>
			</p:confirmDialog>
		</h:form>
	</ui:define>
</ui:composition>